<script type='text/javascript'>
	var SID = "{{sid}}";
	var APP_ID = "{{app_id}}";

	var numPhotosOnScreen = {{num_photos_on_screen}};
	var MY_NAME = "{{my_name}}";
	
	// search parameters
	var IAM = "{{iam}}";
	var LOOK_FOR = "{{look_for}}";
	var MIN_AGE = "{{min_age}}";
	var MAX_AGE = "{{max_age}}";		
	var COUNTRY_ID = "{{country_id}}";
	var REGION_ID = "{{region_id}}";
	
	var IS_CITY_ID = "{{is_city_id}}" == "True" ? true: false;
	
	var CITY_ID = null;
	
	if( IS_CITY_ID )
	{
		CITY_ID = "{{city_id}}";
	}

	var notifiedWrongProbas = {{notified_wrong_probas}};
</script>

<!-- <div style='position: absolute; bottom: 20px; right: 20px; color: rgb( 60, 60, 60 ); padding: 20px'>
	<div style='color: black'>Хочу познакомиться!</div>

	<div style='margin-top: 7px'>
		<div id='adv_div' style='background: url( "{{adv_block.photo_url}}" ); width: 107px; height: 149px; border: 3px solid gold; display: block'>
			<div class='anketa-caption' style='overflow: hidden'>
				<a id='adv_a' href='{{adv_block.anketa_link}}' target='_blank'>Открыть<br>анкету</a>
			</div>
		</div>
	</div>
	<div style='margin-top: 12px'>
		<span style='border-bottom: 1px dashed; cursor: pointer' onclick='onMoveMeToAdvBlock()'>Попасть сюда!</span>
	</div>
</div> -->

<div style='position: absolute; top: 200px; right: 20px; color: rgb( 60, 60, 60 ); padding: 20px'>
	<div style='overflow: hidden'>
		<div class='dark_dashed_link' onclick='onAddMyPhrase()' title='Новая фраза будет доступна в "Моих фразах"'>Записать мою фразу</div>
	</div>
</div>

<div id='dev_message_container' style='display: none'>
	<div style='width: 350px; background: rgb(195,195,195); padding: 10px'>
		<div style='margin-bottom: 5px; overflow: hidden; padding: 5px 5px 5px 0px'>
			Что улучшить, исправить; чем дополнить?
		</div>
		<div style='overflow: hidden'>
			<textarea style='width: 100%; height: 150px' class='my-phrase'></textarea>
		</div>
		<div style='overflow: hidden; padding: 10px'>
			<div class='phrase-blue-button' onclick='sendDevMessage()'>Отправить</div>
			<div class='phrase-blue-button' style='margin-left: 10px' onclick='closeFancybox()'>Отменить</div>
		</div>
	</div>	
</div>

<div style='overflow: hidden'>
	{% for i in screen_photos_range %}
		{% include "photo.html" with img_url='/static/img/unknown.png' index=i answer='unknown' %}	
	{% endfor %}
	<div style='overflow: hidden'>
		<table height='100%' cellpadding='0' cellspacing='0'>
			<tr height='0px'>
				<td>
					<div title='Изменить условия поиска' class='gray-bnt-link' onclick='goToSearch()' style='margin-bottom: 5px'>Поиск</div>
				</td>
			</tr>
			<tr>
				<td>
					<div title='Изменить удачные/неудачные контакты' class='gray-bnt-link' onclick='goToContacts()'>Контакты</div>
				</td>
			</tr>
			<tr>
				<td valign='bottom'>
					<div>
						<img id='ancet-loader' src='/static/img/new-ancet-loader.gif' style='display: block'>
						{% include "next.html" %}
					</div>
				</td>
			</tr>
		</table>
	</div>
</div>

<div style='width: 100%; overflow: hidden'>
	<div id='hint-pointer' style='display: none; background: url( "/static/img/arrow.png" ); width: 40px; height: 19px; float: left; margin-left: 189px; overflow: hidden'></div>
</div>

<div id='hint-content' style='display: none; width: 617px; background: white; overflow: hidden; padding: 14px; border-radius: 7px;'>
	It's a test
</div>

<div id='teaser' style='width: 617px; overflow: hidden; font-size: 24pt; font-weight: bold; color: rgb( 157,157,157); margin-top: 30px;'>
	Интересно? Наведите курсор на {% if look_for == 'M' %}парня{% else %}девушку{% endif %}.
</div>

<div id='title_container' style='display: none'>
	<div style='width: 575px; overflow: hidden'>
		<div style='float: left; width: 46px'>
			<img name='image' style='width: 46px; height: 62px' src=''>
		</div>

		<div style='float: left'>

			<div style='width: 529px; overflow: hidden'>
				<div name='title' style='height: 27px; padding: 0px 5px 5px 10px; font-size: 12pt; font-weight: bold; float: left'>Татьяна Игоревна, 25 лет</div>
				<div style='overflow: hidden; float: right'>
					<div name='proba_style' class='answer0' style='border-radius: 5px; padding: 4px; font-weight: bold; color: white; height: 16px'>
						<table cellpadding='0' cellspacing='0' height='100%' width='100%'>
							<tr>
								<td align='center' valign='middle'>
									Ваш идеал на <span name='proba'>13</span>%
								</td>
							</tr>
						</table>
					</div>
				</div>
			</div>
			<div style='width: 529px; overflow: hidden'>
				<div name='age' style='float: left; margin: 0px 0px 0px 10px; font-size: 12pt; font-weight: bold;'></div>	
				<div name='small_photos' style='float: right; overflow: hidden;'>						
				</div>
			</div>
		</div>
	</div>
</div>

<div id='send_message_container' style='display: none'>
	<div style='width: 350px; background: rgb(195,195,195); padding: 5px'>
		<div style='margin-bottom: 10px; overflow: hidden'>
			<img id='message_photo' src='/static/img/gray-photo.png' style='display: block; float: left; width: 46px; height: 62px'>
			<div id='message_name' style='float: left; font-weight: bold; font-size: 12pt; margin-left: 10px' class='send-message-color'></div>
		</div>   			
		<div style='overflow: hidden; margin-bottom: 10px'>
			<div id='message' style='padding: 5px; width: 340px; height: 150px; border-width: 0px; font-family: times; font-size: 14pt; background: white'>
				<div style='overflow: hidden; margin-top: 10px'>
					<div style='-moz-border-top-left-radius: 5px; -webkit-border-top-left-radius: 5px; -khtml-border-top-left-radius: 5px; border-top-left-radius: 5px; float: left;' class='phrase-image phrase-image-daily_{{look_for}}'></div>
					<div onclick='choosePhrase( "u" )' style='float: left; -moz-border-top-right-radius: 5px; -webkit-border-top-right-radius: 5px; -khtml-border-top-right-radius: 5px; border-top-right-radius: 5px;' class='phrase-button phrase-button-daily'>
						<table style='width: 100%; height: 100%'>
							<tr>
								<td align='left' valign='middle'>
									<span style='border-bottom: 1px dashed'>Повседневные фразы</span>
								</td>
							</tr>
						</table>
					</div>
				</div>
					
				<div style='overflow: hidden'>
					<div style='float: left;' class='phrase-image phrase-image-my'></div>
					<div onclick='choosePhrase( "my" )' style='float: left;' class='phrase-button phrase-button-my'>
						<table style='width: 100%; height: 100%'>
							<tr>
								<td align='left' valign='middle'>
									<span style='border-bottom: 1px dashed'>Мои фразы</span>
								</td>
							</tr>
						</table>
					</div>
				</div>

				<div style='overflow: hidden'>
					<div style='-moz-border-bottom-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; -khtml-border-bottom-left-radius: 5px; border-bottom-left-radius: 5px; float: left;' class='phrase-image phrase-image-sexy_{{look_for}}'></div>
					<div onclick='choosePhrase( "x" )' style='float: left; -moz-border-bottom-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -khtml-border-bottom-right-radius: 5px; border-bottom-right-radius: 5px;' class='phrase-button phrase-button-sexy'>
						<table style='width: 100%; height: 100%'>
							<tr>
								<td align='left' valign='middle'>
									<span style='border-bottom: 1px dashed'>Возбуждающие фразы</span>
								</td>
							</tr>
						</table>
					</div>
				</div>				
			</div>

			<div style='padding: 5px; width: 350px; height: 100px; border-width: 0px; font-family: tahoma; font-size: 10pt; background: white'>
				<div style='width: 350px; height: 100px;'>
					<table width='100%' height='100%' cellpadding='0' cellspacing='0'>
						<tr>
							<td valign='bottom'>
								<div id='copy_to_clipboard_container' style='display: none; cursor: pointer; margin: 10px 0px 10px 0px;'>
									<span id='copy_to_clipboard' data-clipboard-text="" style='border-bottom: 1px dashed'>Скопировать фразу в буфер обмена</span>
								</div>
								<div id='send_message_hint1'>
									<div style='margin-top: 10px'>Для подбора фраз выберите <i>опцию</i>, затем &mdash; <i>скопируйте и перейдите в анкету</i>.</div>
								</div>
								<div id='send_message_hint2' style='display: none'>
									<div style='margin-top: 10px'>Для подбора другой фразы нажмите <i>Другая фраза</i>, затем &mdash; <i>скопируйте и перейдите в анкету</i>.</div>
								</div>
							</td>
						</tr>
					</table>
				</div>
			</div>
		</div>
		<div style='overflow: hidden; font-size: 12pt; font-weight: bold; margin-bottom: 5px'>
			<a id='ancet_link' href='' class='message-link solid' target='_blank' style='margin-left: 20px'>В анкету</a>
			<span id='other_phrase' onclick='choosePhrase( curPhraseType )' class='message-link dashed' style='display: none; margin-left: 10px'>Другая фраза</span>
			<span id='phrase_screen_back' onclick='onPhraseScreenBack()' class='message-link dashed' style='display: none; margin-left: 10px'>В меню</span>
		</div>
	</div>
</div>
	
<div name='add_to_my_phrases_container' style='display: none; margin-top: 10px'>
	<div class='add-to-my-phrases-image' style='float: left; margin-left: 20px;'></div>
	<div style='float: left; margin-left: 10px'>
		<span style='font-size: 12pt'></span>
	</div>
</div>
 
<div id='pay_form_container' style='display: none'>
	<div style='background: rgb( 40, 40, 40 ); color: rgb(235,235,235); font-size: 10pt; padding: 10px'>
		В данный момент все платные услуги свободно доступны.
		<!--<div class='payment-item-header'>
			Активировать платный режим...
		</div>
		<div class='payment-item'>
			<span onclick='onPay( {{user_id}}, 1 )'>На 1 день &mdash; 1 монета</span>
		</div>
		<div class='payment-item'>			
			<span onclick='onPay( {{user_id}}, 3 )'>На <span class='profit'>неделю</span> &mdash; <span class='profit'>3</span> монеты</span>
		</div>                            
		<div class='payment-item'>			
			<span onclick='onPay( {{user_id}}, 5 )'>На <span class='profit'>месяц</span> &mdash; <span class='profit'>5</span> монет</span>
		</div>-->
	</div>
</div>

<div id='notify_wrong_probas' style='display: none'>
	<div style='width: 450px'>
		<p>
			Стоп! <b>Вы неверно настроили контакты.</b>
		</p>
		<p>
			Обратите внимание на следующую картинку. Так работает приложение у одного пользователя, <b>который правильно настроил контакты.</b>
		</p>
		<p>
			<img src='/static/img/correct_settings_{{look_for}}.png'>
		</p>
		<p>
			Видите, оценки заметно отличаются, и сразу видно, кому можно написать. Как добиться этого?
		</p>
		<p>
			<b>Должны быть выбраны 1, 2, 3 действительно удачных контакта, остальные &mdash; по Вашим ощущениям.</b>
		</p>
		<p>
			Отправляйтесь <span onclick='closeFancyboxGoToContacts()' class='dashed_link'>в контакты</span> и внесите необходимые изменения.
		</p>
	</div>
</div>

<div id='pay_for_phrase' style='display: none'>
	<span style='font-size: 12pt'>
		<div style='overflow: hidden'>
			<span class='sexy-color'><i><b>Возбуждающие</b></i></span> фразы доступны только в платном режиме.
		</div>
		<div style='overflow: hidden; margin-top: 10px'>
			Попробуйте <span class='dashed_link' onclick='choosePhrase( "u" )'><nobr>повседневные фразы</nobr></span>
			либо перейдите в <span class='dashed_link' onclick='onShowPay()'><nobr>оплаченный режим</nobr></span>.</span>
		</div>
</div>

<div id='you_have_not_saved_phrases' style='display: none'>
	<span style='font-size: 12pt'>
		Вы пока не сохранили ни одной фразы. Воспользуйтесь ссылкой &laquo;Добавить мою фразу&raquo;.
	</span>
</div>

<div id='your_payment_done' style='display: none'>
	<p>Спасибо! Ваша оплата зачислена.</p>
</div>

<div id='add_my_phrase_container' style='display: none'>
	<div style='width: 350px; background: rgb(195,195,195); padding: 10px'>
		<div style='margin-bottom: 5px; overflow: hidden; padding: 5px 5px 5px 0px'>
			Пришла на ум новая фраза для знакомства?
		</div>
		<div style='overflow: hidden'>
			<textarea style='width: 100%; height: 150px' class='my-phrase'></textarea>
		</div>
		<div style='overflow: hidden; padding: 10px'>
			<div class='phrase-blue-button' onclick='onSaveMyPhrase()'>Сохранить</div>
			<div class='phrase-blue-button' style='margin-left: 10px' onclick='onCancelMyPhrase()'>Отменить</div>
		</div>
	</div>
</div>

<div id='on_move_me_to_adv_block_message' style='display: none'>
	<div style='padding: 10px; width: 300px'>
	<p>Ваша фотография и ссылка на анкету будут видны до тех пор, пока другой пользователь не поместит свою фотографию.</p>
	<p>Стоимость услуги разового помещения фотографии &mdash; 1 монета.</p>
	<div style='margin-top: 20px'>
		<div class='blue-button' onclick='onPay( {{user_id}} )'>Оплатить</div>
	</div>			
	</div>
</div>

<div id='wait_after_pay_message' style='display: none'>
	<div style='padding: 10px; width: 300px'>
		<p>Если Вы заплатили, Ваше фото должно появиться в течение 5-10 минут, когда пройдёт оплата.</p>
		<p>Чтобы увидеть его, продолжайте искать либо войдите в приложение снова.</p>
		<div style='margin-top: 20px'>
			<div class='blue-button' onclick='closeFancybox()'>Закрыть</div>
		</div>			
	</div>
</div>


<div class='random-phrase' style='visibility: hidden'>
	<div style='overflow: hidden'>
		<img name="image" src="http://photo10.wambacdn.net/63/41/07/1129701436/1129702254_small.jpg?updated=20130616194427">
		<div name='user_name'><a href='http://google.ru'>Алисия Свон</a></div>
	</div>
	<div name='phrase' class='phrase'>Знаешь, как отличить эротику от порнографии? Эротика – это постоянное ожидание порнографии.</div>
	<div class='add-to-my-phrases'><span></span></div>

</div>